<script setup lang="ts">
import Dashboard from '@/view/main/UserPersonalPartition/DashBoardPartition.vue'
import Profile from '@/view/main/UserPersonalPartition/UserProfilePartition.vue'
// import Resume from '@/view/main/UserPersonalPartition/ResumePartition.vue'
import {ref} from "vue";
import {getUserInfoService, getUserPersonalInfoService, updateUserAvatarService} from "@/api/user.js";
import {useTokenStore} from "@/stores/token.js";
import {ElMessage} from "element-plus";
import { Plus, Upload } from '@element-plus/icons-vue';
import {useRouter} from "vue-router";

const activeTab = ref('profile'); // 使用ref定义响应式数据
const router = useRouter();
const handleTabClick = (tab) => {
  console.log('Clicked tab:', tab.name);
};

const userInfo = ref({
  name: '姓名',
  birthdate: '出生日期',
  degree: '学历',
  school: '学校',
  specialized: '专业',
  intention: '求职意向',
  skills: '专业技能',
  projects: '项目经历',
  phone: '联系电话',
  experiment: '资历',
  location: '居住地',
})

//获取用户信息
const userInfo2 = ref({})

async function getUserInfo3(){
  let res = await getUserInfoService()
  userInfo2.value = res.data
}

getUserInfo3();

//获取用户信息
async function getUserInfo(){
  let res = await getUserPersonalInfoService()
  userInfo.value = res.data.resume
  console.log(userInfo.value)
}

getUserInfo();

//获取token
const token = useTokenStore().token;
const uploadRef = ref();

const imgUrl = ref('');
async function getUserInfo2(){
  let res = await getUserInfoService()
  imgUrl.value = res.data.headImg
}

getUserInfo2();

defineExpose({ activeTab, handleTabClick });

//上传成功
const uploadSuccess = (res) => {
  imgUrl.value = res.data;
}

//上传头像
const updataAvatar = async () => {
  let res = await updateUserAvatarService(imgUrl.value);
  ElMessage.success("修改成功")
}

const logout = () => {
  // 跳转回登录页面
  router.push('/login');
};
</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo2.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link active" v-if="userInfo2.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo2.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>个人中心</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>
          <li class="active">个人中心</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Candidates Dashboard Area -->
  <section class="candidates-dashboard-area ptb-100">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <div class="avatar-sidebar">
            <h3>个人中心</h3>

            <div class="avatar-img">

              <el-upload
                  ref="uploadRef"
                  class="avatar-uploader"
                  :show-file-list="false"
                  :auto-upload="true"
                  action="/api/upload"
                  name="file"
                  :headers="{'Authorization':token}"
                  :on-success="uploadSuccess">
                <img v-if="imgUrl" :src="imgUrl" class="avatar" style="width:100px;height:100px"/>
              </el-upload>
              <br />
              <el-button type="primary" :icon="Plus" size="large" @click="uploadRef.$el.querySelector('input').click()" class="personal-button">
                选择图片
              </el-button>
              <el-button type="success" :icon="Upload" size="large" @click="updataAvatar()" class="personal-button">
                上传头像
              </el-button>

              <div class="avatar-mane">
                <div class="avatar-mane">
                  <h4>{{ userInfo.name }}</h4>
                  <span>{{ userInfo.birthdate }}</span>
                </div>
              </div>
            </div>
            <div class="dashboard-navigation mb-3 vertical-tabs">
              <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs" tab-position="right">
                <el-tab-pane label="职位消息" name="dashboard" class="custom-tabs-pane"></el-tab-pane>
                <el-tab-pane label="个人信息" name="profile" class="custom-tabs-pane"></el-tab-pane>
<!--                <el-tab-pane label="简历信息" name="resume" class="custom-tabs-pane"></el-tab-pane>-->
                <el-tab-pane label="登出" name="logout" @click="logout" class="custom-tabs-pane"></el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>

<!--        主体页面-->
        <div class="col-lg-8">
          <dashboard v-if="activeTab === 'dashboard'"></dashboard>
          <profile v-if="activeTab === 'profile'"></profile>
          <logout v-if="activeTab === 'logout'"></logout>
        </div>


      </div>
    </div>
  </section>
  <!-- End Candidates Dashboard Area -->

  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";
@import "@/assets/css/guidepage.css";

.vertical-tabs {
  width: fit-content; /* 或其他适合的宽度 */
  height: 100%; /* 保证高度适应内容 */
  display: flex;
  flex-direction: column;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.personal-button {
  margin-bottom: 10px;
  border-radius: 16px !important; /* 根据需要调整圆角大小 */
  padding: 8px 16px !important;
}

</style>